<script setup lang="ts" name="MapMarker">
import { mapProviderKey } from './constant';
import type { MapProvider } from './map-type';

const props = withDefaults(
	defineProps<{
		path: [number, number][];
		zIndex?: number;
		bubble?: boolean;
		cursor?: boolean;
		strokeColor?: string;
		strokeOpacity?: number;
		strokeWeight?: number;
		strokeStyle?: 'solid' | 'dashed';
		strokeDasharray?: number[];
		lineJoin?: 'miter' | 'round' | 'bevel';
		lineCap?: 'butt' | 'round' | 'square';
		geodesic?: boolean;
		showDir?: boolean;
		isOutline?: boolean;
		borderWeight?: number;
		outlineColor?: string;
		draggable?: boolean;
		height?: number;
		extData?: Record<string, any>;
		finishDraw?: (marker: any) => void;
	}>(),
	{}
);
const mapProvider = inject<MapProvider>(mapProviderKey);

onMounted(() => {
	if (!mapProvider) return;

	mapProvider.onLoaded((isLoaded: boolean) => {
		if (!isLoaded) return;
		mapProvider?.drawPolyline(
			{
				...props,
			},
			props.finishDraw
		);
	});
});
</script>

<template>
	<div></div>
</template>

<style lang="scss" scoped></style>
